<template>
	<div class="home">
		<div class="home__top">

		</div>
		<div class="home__con">
			<div ref="toptop">
				<div ref="form" style="display: flex;justify-content: space-between;align-items: center;">
					<div style="display: flex;align-items: center;flex-wrap: wrap;">
						<div class="item">
							<el-input placeholder="10101007" v-model="form.lz">
								<template slot="prepend">产品 :</template>
							</el-input>
							<el-input suffix-icon="el-icon-date" placeholder="092#" v-model="form.lz">

							</el-input>
						</div>
						<div class="item">
							<el-input placeholder="10101007" v-model="form.lz">
								<template slot="prepend">单据号:</template>
							</el-input>
							<el-input suffix-icon="el-icon-date" placeholder="" v-model="form.lz">

							</el-input>
						</div>
						<div class="item">
							<el-input placeholder="" v-model="form.lz">
								<template slot="prepend">完成工序 :</template>
							</el-input>
							<el-input suffix-icon="el-icon-date" placeholder="" v-model="form.lz">

							</el-input>
						</div>
						<div class="item">
							<el-input placeholder="" v-model="form.lz">
								<template slot="prepend">显示部门 :</template>
							</el-input>
							<el-input suffix-icon="el-icon-date" placeholder="" v-model="form.lz">

							</el-input>
						</div>
						<el-input class="item1" placeholder="" suffix-icon="el-icon-date" placeholder="2024-03-29"
							v-model="form.lb">
							<template slot="prepend">计划出货 :</template>
						</el-input>
						<el-input placeholder="" suffix-icon="el-icon-date" placeholder="2024-03-29" v-model="form.bm">
							<template slot="prepend">日任务量 :</template>
						</el-input>
					</div>
					<div class="tj">
						添加
					</div>
				</div>
				<div style="display: flex;margin-bottom: 10px;">
					<div class="home__top__btn" v-for='(item,index) in btnlist' :key="index">{{item.text}}</div>

				</div>
			</div>
			<el-table border :data="tableData" stripe style="width: 100%" :height="`calc(45% - ${toptopH}px`"
				:header-cell-style='{background:"#F9F9F9",color:"#1F163A",textAlign:"center"}'
				:cell-style="{color:'#1F163A',textAlign:'center'}">
				<el-table-column type="index" label="序" width="76">
				</el-table-column>
				<el-table-column prop="pm" label="屏幕" width="103">
				</el-table-column>
				<el-table-column prop="djh" label="单据号" width="150">
				</el-table-column>
				<el-table-column prop="scs" label="生产商" width="230">
				</el-table-column>
				<el-table-column prop="dd" label="订单" width="150">
				</el-table-column>
				<el-table-column prop="cp" label="产品" width="230">
				</el-table-column>
				<el-table-column prop="wgrq" label="完工日期" width="230">
				</el-table-column>
				<el-table-column prop="wggx" label="完工工序" width="230">
				</el-table-column>
				<el-table-column prop="rwsl" label="任务数量" width="230">
				</el-table-column>
				<el-table-column prop="bm" label="部门" width="150">
				</el-table-column>
			</el-table>
			<el-table border :data="tableData1" stripe style="width: 100%"
				:height="`calc(55% - ${footerh}px - ${formH}px - 30px )`"
				:header-cell-style='{background:"#F9F9F9",color:"#1F163A",textAlign:"center"}'
				:cell-style="{color:'#1F163A',textAlign:'center'}">

				<el-table-column prop="cjrq" label="裁剪日期 " width="150">
				</el-table-column>
				<el-table-column prop="cp" label="产品" width="200">
				</el-table-column>
				<el-table-column prop="ch" label="床号" width="200">
				</el-table-column>
				<el-table-column prop="djh" label="单据号" width="220">
				</el-table-column>
				<el-table-column prop="ddh" label="订单号" width="220">
				</el-table-column>
				<el-table-column prop="scdh" label="生产单号" width="220">
				</el-table-column>
				<el-table-column prop="zsl" label="总数量" width="220">
				</el-table-column>
				<el-table-column prop="bm" label="部门" width="350">
				</el-table-column>
			</el-table>
			<div class="hj"
				style="height: 30px;background: #F9F9F9;display: flex;align-items: center;justify-content: flex-end;color: #1F163A;">
				总数量300
			</div>
			<div class="footer" ref="footer">
				<div>
					总共2 条记录
				</div>
				<el-pagination background small layout="prev, pager, next,jumper" :total="328">
				</el-pagination>
			</div>
		</div>
	</div>
</template>

<script>
	export default {
		data() {
			return {
				form: {
					lz: '',
					lb: '',
					bm: '',
					xm: "",
					yf: '',
					je: ""
				},
				btnlist: [{
					text: '修改'
				}, {
					text: '删除'
				}, {
					text: '全删'
				}, {
					text: '撤销'
				}, {
					text: '列项'
				}, {
					text: '保存'
				}, {
					text: '退出'
				}, ],
				tableData: [{
						pm: '屏幕',
						djh: '单据号',
						scs: '生产商',
						dd: '订单',
						cp: '产品',
						wgrq: '完工日期',
						wggx: '完工工序',
						rwsl: '任务数量',
						bm: '部门'
					},
					{
						pm: '屏幕',
						djh: '单据号',
						scs: '生产商',
						dd: '订单',
						cp: '产品',
						wgrq: '完工日期',
						wggx: '完工工序',
						rwsl: '任务数量',
						bm: '部门'
					},
					{
						pm: '屏幕',
						djh: '单据号',
						scs: '生产商',
						dd: '订单',
						cp: '产品',
						wgrq: '完工日期',
						wggx: '完工工序',
						rwsl: '任务数量',
						bm: '部门'
					},
				],
				tableData1: [{
						cjrq: '2024-02-20 ',
						cp: '092#',
						ch: '291',
						djh: '1000002050',
						ddh: '092-1',
						scdh: '092-1',
						zsl: '300',
						bm: '隔壁3楼'
					},
					{
						cjrq: '2024-02-20 ',
						cp: '092#',
						ch: '291',
						djh: '1000002050',
						ddh: '092-1',
						scdh: '092-1',
						zsl: '300',
						bm: '隔壁3楼'
					},
					{
						cjrq: '2024-02-20 ',
						cp: '092#',
						ch: '291',
						djh: '1000002050',
						ddh: '092-1',
						scdh: '092-1',
						zsl: '300',
						bm: '隔壁3楼'
					},
				],
				footerh: 67,
				formH: 20,
				toptopH: 0
			}
		},
		created() {
			// this.
		},
		mounted() {
			this.footerh = this.$refs.footer.offsetHeight
			this.toptopH = this.$refs.toptop.offsetHeight
			this.formH = this.$refs.form.offsetHeight
			console.log(this.formH)
			let _this = this
			window.onresize = function() {
				_this.formH = _this.$refs.form.offsetHeight
				_this.toptopH = _this.$refs.toptop.offsetHeight
				// console.log(_this.$refs.form.offsetHeight)
			};
		},
	}
</script>
<style scoped>
	.home {
		background-color: #fff;
		height: calc(100% - 26px);
		border-radius: 5px;
		padding: 13px 10px;

	}

	.home__top {
		display: flex;
		align-items: center;
		justify-content: space-between;
	}

	.home__top__btn {
		cursor: pointer;
		padding: 0 18px;
		height: 50px;
		line-height: 50px;
		background-color: #dbe4fd;
		color: #231918;
		font-size: 15px;
		margin-right: 1px;
	}

	.home__con {
		/* margin-top: 10px; */
		height: calc(100% - 50px);
	}

	.box {
		width: 60px;
		height: 22px;
		border-radius: 3px;
		text-align: center;
		line-height: 22px;
		color: #fff;
	}

	.footer {
		display: flex;
		align-items: center;
		justify-content: space-between;
		font-family: Alibaba PuHuiTi;
		font-weight: 400;
		font-size: 15px;
		color: #1F163A;
		padding: 20px 48px;
	}

	.bz {
		display: flex;

	}

	.hj {
		font-size: 19px;
		padding-right: 40px;
	}

	/deep/.el-input__inner {
		width: 135px;
		padding-left: 10px;
	}

	.el-input {
		width: fit-content;
		/* margin-right: 20px; */
		margin-bottom: 12px;
	}

	/deep/.el-input-group__prepend {
		padding: 0 10px;
	}

	/deep/.el-input__icon {
		width: 20px;
	}

	/deep/.item .el-input-group--prepend .el-input__inner {
		border-radius: 0 !important;
		border-right: 0;
	}

	/deep/.item .el-input__inner {
		border-top-left-radius: 0 !important;
		border-bottom-left-radius: 0 !important;

	}

	/deep/.el-input--suffix .el-input__inner {
		padding-right: 20px;
	}

	/deep/.yf .el-input__inner {
		width: 240px;
	}

	/deep/.bz .el-input {
		width: 100%;
		display: flex;
		/* padding-left: 10px; */
	}

	/deep/.bz .el-input .el-input__inner {
		width: 100%;
	}

	/deep/.bz .el-input .el-input-group__prepend {
		width: fit-content;
		display: flex;
		align-items: center;
	}

	.bz {
		display: flex;
		flex: 1;
	}

	.item,
	.item1 {
		margin-right: 11px;
	}

	.icon {
		width: 42px;
		height: 36px;
		align-self: flex-end;
	}

	.jzr {
		font-family: Alibaba PuHuiTi;
		font-weight: 400;
		font-size: 15px;
		color: #1E173C;
		line-height: 15px;
		justify-self: flex-end;
		align-self: flex-start;
	}

	.tj {
		width: 60px;
		height: 31px;
		background: rgba(74, 119, 246, 0.2);
		border: 1px solid #4A77F6;
		display: flex;
		align-items: center;
		justify-content: center;
		font-family: Adobe Heiti Std;
		font-weight: normal;
		font-size: 14px;
		color: #4A77F6;
		cursor: pointer;
	}
	.hj {
		font-size: 19px;
		padding-right: 40px;
	}
</style>